<template>
  <div>
    <!-- data：指定渲染的数据源
    default-expand-all 是否默认展开所有节点，true表示展开
    label：指定渲染页面的内容属性
    children：指定子节点渲染的数据 -->

    <!-- props:{label:值}
    可以通过通过props中的label属性来修改渲染页面内容的属性名 -->
    <el-tree :data="treeData" default-expand-all :props="{ label:'name' }">
      <template v-slot="{ data }">
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="height: 40px;width: 100%;"
        >
          <el-col>
            <span>{{ data.name }}</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>{{ data.manager }}</el-col>
              <el-col>
                <!-- 下拉菜单 element -->
                <el-dropdown>
                  <span> 操作<i class="el-icon-arrow-down" /> </span>
                  <!-- 下拉菜单 -->
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </template>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          name: '总裁办',
          manager: '小明',
          children: [
            {
              name: '总裁',
              manager: '小明'
            }
          ]
        }, {
          name: '技术部',
          manager: '小李',
          children: [
            {
              name: '总裁'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
$height-light-color:red;
h1{
    color: $height-light-color;
}
</style>
